import React from "react";
import PropTypes from 'prop-types';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image,
  Platform
} from 'react-native';
import StatusBarSelf from './StatusBarSelf'

const isIos = Platform.OS == 'ios';

export default Header = ({ navigation, LeftButton, RightButton, Title, isAtRoot, hideSepLine, bgColor, lightContent}) => {

  return (
    <>
      <StatusBarSelf color={bgColor}/>
      <View style={[styles.header,hideSepLine ? {borderBottomWidth: 0.0}:{borderBottomWidth: 0.3}, {backgroundColor:bgColor?bgColor:'#ffffff'}]}>
      <View style={styles.leftButton}>
        {
          LeftButton ?
            <LeftButton />
            :
            <TouchableOpacity style={{height:"100%", justifyContent:"center"}}
              onPress={() => {
                if (!navigation || !navigation.canGoBack() || isAtRoot) {
                }
                else {
                  navigation.goBack();
                }

              }}
            >
              {!(!navigation || !navigation.canGoBack() || isAtRoot) && (<Image source={lightContent?require('source/image/comm/back_white.png'):require('source/image/comm/back.png')} style={{ width: 18, height: 16, marginLeft:15 }} />)}
            </TouchableOpacity>
        }
      </View>

      <View style={[styles.title]}>
        {

          (Title && typeof Title === 'string' ?
            <Text style={[styles.titleText,{color:lightContent?'#ffffff':'#333333'}]} adjustsFontSizeToFit={true} numberOfLines={1}>{Title}</Text>
            :
            <Title />)
        }
      </View>
      <View style={styles.rightButton}>
        {
          RightButton &&
          <RightButton />
        }
      </View>
    </View>
    </>
  );
}

Header.propTypes = {
  navigation: PropTypes.object,
  Title: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  LeftButton: PropTypes.object,
  RightButton: PropTypes.func,
  isAtRoot: PropTypes.bool,
  searchText: PropTypes.string
};

Header.defaultProps = {
  Title: '',
  LeftButton: null,
  RightButton: null,
  isAtRoot: false
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    height: isIos ? 44:49, 
    backgroundColor: "#ffffff",
    borderBottomWidth: 0.3,
    borderBottomColor: '#e4e4e4'
  },
  leftButton: {
    flex: 2,
    justifyContent: 'center',
  },
  title: {
    flex: 5,
    // flex: 6,
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleText: {
    fontWeight: '600',
    fontSize: 18,//gREM(32),
    color: '#333333'
  },
  rightButton: {
    flex: 2,
    justifyContent: 'center',
  },
});